<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSDN论坛</title>
</head>
<body>
<div>
    <input type="button" value="收藏" onclick="collect()"></input>
    <input type="button" value="点赞" onclick="thumb()"></input>
    <input type="button" value="关注此作者" onclick="target()"></input>
    <input type="button" value="查看评论" onclick="comment()"></input>
    <input type="button" value="举报此文章" onclick="report_click()"></input>
    <input type="button" value="分享" onclick="share_click()"></input>
</div>
    <div id="article">
        <textarea  style="width: 1400px;height: 500px;word-break:break-all" :value="context.context"></textarea>
    </div>
    <div id="pic">
        <img id="piccontext" src="" height="200" alt="图片在此显示">
    </div>
</body>
</html>

<script src="../js/ajax.js"></script>
<script src="../js/vue.js"></script>

<script>
    let query = window.location.search.substring(1);
    let blog_id = query.split("=");
    let user_id=window.localStorage.getItem("loginName");
    window.localStorage.setItem("blogId",blog_id[1]);
    window.onload=function get_article() {

        getPic(blog_id);
        //读取文章
        new Vue({
            el: "#article",
            data() {
                return {
                    context: []
                }

            },
            mounted() {
                let _this = this;
                ajax({
                    method: "post",
                    url: "../../browse",
                    data: {
                        blogId: blog_id[1],
                        code: 0
                    },
                    success: function (result) {
                        console.log(result);
                        _this.context = result;
                    },
                    error: function () {
                        alert("数据读取失败");
                    }
                })
            }
        })

    }
        //读取图片
    function getPic(e) {
        ajax({
            method: "post",
            url: "../../browse",
            data: {
                blogId: e[1],
                code: 1,
            },
            success: function (result) {
                console.log(result);
                let obj = document.getElementById("piccontext");
                obj.src = result['picurl'].replace("]","");
            },
            error: function () {
                alert("数据读取失败");
            }
        })
    }

    function collect(){
        let login_name = localStorage.getItem("loginName");

        if(login_name==="游客"){
            window.location.href="../html/Login.html";
            alert("游客请登录")
        }
        ajax({
            method: "post",
            url: "../../browse",
            data: {
                userName:user_id,
                blogId: blog_id[1],
                code: 2,
            },
            success: function (result) {
                alert(result['result']);
            },
            error: function () {
                alert("收藏失败");
            }
        })

    }

    function target(){
        let login_name = localStorage.getItem("loginName");

        if(login_name==="游客"){
            window.location.href="../html/Login.html";
            alert("游客请登录")
        }
        ajax({
            method: "post",
            url: "../../browse",
            data: {
                userName:user_id,
                blogId: blog_id[1],
                code: 3,
            },
            success: function (result) {
                alert(result['result']);
            },
            error: function () {
                alert("关注失败");
            }
        })
    }
    let n=0;
    function thumb(){
        let login_name = localStorage.getItem("loginName");

        if(login_name==="游客"){
            window.location.href="../html/Login.html";
            alert("游客请登录")
        }
        if(n==0) {
            ajax({
                method: "post",
                url: "../../thumb",
                data: {
                    blogId: blog_id[1],
                },
                success: function (result) {
                },
                error: function () {
                    alert("关注失败");
                }
            })
            n=1;
        }
        else
            alert("请不要重复点赞");
    }
    function comment(){
        let login_name = localStorage.getItem("loginName");

        if(login_name==="游客"){
            window.location.href="../html/Login.html";
            alert("游客请登录")
        }
        else {
            window.localStorage.setItem("page", "1");
            window.location.href = "./comment.html";
        }
    }

    function report_click(){
        let login_name = localStorage.getItem("loginName");

        if(login_name==="游客"){
            window.location.href="../html/Login.html";
            alert("游客请登录")
        }
        else
        window.location.href="./user_report.html";
    }

    function share_click(){
        window.location.href="./share.html";
    }
</script>